<template>
    <div class="authority-tab">
        <div v-for="item in authorityTab" :key="item.value" class="authority-tab-item">
            <slot :name="item.value" :item="item" />
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import { PermissionConfig } from '@/store/modules/common-module';

@Component({
    name: 'authority-tab',
    components: {
        sticky: () => import('@/layout-components/sticky/index.vue')
    }
})
export default class detail extends Vue {
    @Prop({ required: true }) tabMapOptions;

    get moduleId() {
        return this.$route.meta.moduleId || '';
    }
    get authorityTab() {
        //   if(this.$store[this.moduleId])
        const permissionObj: PermissionConfig = this.$store.state[this.$route.meta.moduleId].v_permission;
        if (permissionObj) {
            return this.tabMapOptions.reduce((k, m) => {
                if (permissionObj.page.browse.includes(m.value) || !m.isValidatePermisssion) {
                    m.edit = !m.isValidatePermisssion ? true : permissionObj.page.edit.includes(m.value);
                    k.push(m);
                }
                return k;
            }, []);
        } else {
            return this.tabMapOptions;
        }
        // return this.tabMapOptions
    }
    //    created() {
    //     // const state = this.$store.state[this.$route.meta.moduleId]
    //     this.$nextTick(() => {
    //       // 这里是根据vuex 在用一个对象进行接受  因为用 计算属性 moduleId 变了 计算属性也会跟着变 导致后面 watch v_status 也会再次执行
    //       // this.m_moduleId = JSON.parse(JSON.stringify(this.$route.meta.moduleId))
    //       this.v_vuexStore = this.$store.state[this.moduleId]
    //     })
    //   }
}
</script>

<style lang="scss">
@import 'src/styles/variables.scss';
</style>
